import React from 'react'
// 引入地区的数据
import { areaList } from '@vant/area-data'

const Add = () => {
    const navigate = React.$Router.useNavigate()
    // 初始化表单对象
    const [form] = React.$Vant.Form.useForm()
    // 存放选择需要租赁商品的数据的状态
    const [product, setProduct] = React.useState({})
    // 获取登录信息的状态
    const [LoginAuth, setLoginAuth] = React.useState(React.$LoginAuth)

    // 设置地区选择框是否显示
    const [RegionShow, SetRegionShow] = React.useState(false)

    // 地区文字
    const [region, SetRegion] = React.useState('')

    // 选中地区的区域码
    const [code, SetCode] = React.useState([])

    // 显示选择日期的选择框
    const [DateShow, SetDateShow] = React.useState(false)


    // 10天后的日期
    const [start, SetStart] = React.useState(new Date(new Date().setHours(0, 0, 0, 0)).getTime())
    const [end, SetEnd] = React.useState(new Date(new Date().getTime() + 10 * 24 * 60 * 60 * 1000))
    const [day, SetDay] = React.useState(10)
    const [endtime, SetEndTime] = React.useState(`${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`)

    // 图片
    const [card, SetCard] = React.useState({})

    // 10天的租金，不包含押金
    const [price, SetPrice] = React.useState(0)

    // 带押金
    const [rent, SetRent] = React.useState(0)

    const loginAuth = React.$Cookies.load('LoginAuth')

    React.useEffect(() => {
        setLoginAuth(loginAuth);
    }, [])

    React.useEffect(() => {
        let product = React.$Cookies.load('Product') ? React.$Cookies.load('Product') : {}
        setProduct(product)
        total()
    }, [])

    React.useEffect(() => {
        SetDay(day)

        total()
    }, [day])

    const total = () => {
        let product = React.$Cookies.load('Product') ? React.$Cookies.load('Product') : {}

        let total = parseFloat(product.rent_price) * day?parseFloat(product.rent_price) * day:0.00

        SetPrice(total.toFixed(2))

        let rent = total + parseFloat(product.rent)?total + parseFloat(product.rent):0.00

        SetRent(rent.toFixed(2))
    }

    const onBack = () => {
        React.$Cookies.remove('Product','/')
        navigate(-1)
    }

    // 提交租赁商品去后台处理
    const onAdd = async (values) => {
        if (price <= 0 && day == 0) {
            React.$Vant.Toast({
                type: 'error',
                message: '租用结束时间不能为当天'
            })
            return false
        }

        let starttime = start / 1000
        let endtime = Math.floor(end.getTime() / 1000)

        let data = {
            busid: LoginAuth.id,
            proid: product.id,// 商品id
            rent: product.rent,// 押金
            price: rent,// 包含押金的价格
            starttime: starttime,// 租用的开始时间
            endtime: endtime,// 租用的结束时间
            address: values.address,
            day: day
        }

        // 省市区
        let [province, city, district] = code

        if (JSON.stringify(code) === '[]') {
            React.$Vant.Toast.fail('请选择地区')
            return false
        }

        if (province) {
            data.province = province
        }

        if (city) {
            data.city = city
        }

        if (district) {
            data.district = district
        }

        // 上传的图片
        let file = values.card[0].file ? values.card[0].file : ''

        if (file) {
            data.card = file
        }

        let result = await React.$Api.LeaseAdd(data)

        if(result.code === 1){
            React.$Vant.Toast.success({
                message: result.msg,
                onClose:()=>{
                    React.$Cookies.remove('Product', { path: '/' })
                    navigate('/order/order/index')
                }
            })
        }else{
            React.$Vant.Toast.fail({
                message: result.msg,
            })
        }
    }

    // 选择需要租赁商品
    const SelectProduct = () => {
        navigate('/product/product/index?action=add')
    }

    // 选择地区的方法
    const RegionConfirm = (_, values) => {
        let [province, city, district] = values
        let region_text = ''
        let region_code = []

        if (province.value) {
            region_text = province.text + '-'
            region_code.push(province.value)
        }

        if (city.value) {
            region_text += city.text + '-'
            region_code.push(city.value)
        }

        if (district.value) {
            region_text += district.text
            region_code.push(district.value)
        }

        SetRegion(region_text)
        SetCode(region_code)
        SetRegionShow(false)
    }


    // 选择日期的方法
    const DateConfirm = (values) => {
        SetEndTime(`${values.getFullYear()}-${values.getMonth() + 1}-${values.getDate()}`)
        SetEnd(values)

        const timestamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime(); //获取当天零点的时间

        let newTime = values.getTime()

        let Day = (newTime - timestamp) / (24 * 60 * 60 * 1000)
        SetDay(Day)
    }



    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='立即租赁'
                    leftText='返回'
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <div className='add'>
                <React.$Vant.Form
                    form={form}
                    onFinish={onAdd}
                >

                    {/* 选择租赁商品 */}
                    <React.$Vant.Form.Item
                        labelWidth='4em'
                        labelAlign='right'
                        label="租赁商品"
                        onClick={SelectProduct}
                    >
                        <React.$Vant.Input placeholder="租赁商品" isLink readOnly value={product.name ? product.name : ''} />
                    </React.$Vant.Form.Item>

                    {/* 押金 */}
                    <React.$Vant.Form.Item
                        label="押金"
                        labelWidth='4em'
                        labelAlign='right'
                    >
                        <React.$Vant.Input readOnly value={product.rent ? product.rent : ''} />
                    </React.$Vant.Form.Item>

                    {/* 日租租金 */}
                    <React.$Vant.Form.Item
                        label="日供"
                        labelWidth='4em'
                        labelAlign='right'
                    >
                        <React.$Vant.Input readOnly value={product.rent_price ? product.rent_price : ''} />
                    </React.$Vant.Form.Item>

                    <React.$Vant.Form.Item
                        name="nickname"
                        label="昵称"
                        labelWidth='4em'
                        labelAlign='right'
                        initialValue={LoginAuth.nickname}
                        rules={[
                            { required: true, message: '请输入昵称' }
                        ]}
                    >
                        <React.$Vant.Input placeholder="请输入昵称" />
                    </React.$Vant.Form.Item>

                    {/* 手机号 */}
                    <React.$Vant.Form.Item
                        label="手机号"
                        name="mobile"
                        labelWidth='4em'
                        labelAlign='right'
                        initialValue={LoginAuth.mobile}
                        rules={[
                            { required: true, message: '请输入手机号' }
                        ]}
                    >
                        <React.$Vant.Input placeholder="请输入手机号" />
                    </React.$Vant.Form.Item>

                    {/* 地区 */}
                    <React.$Vant.Form.Item
                        label="地区"
                        labelWidth='4em'
                        labelAlign='right'
                        onClick={() => { SetRegionShow(true) }}
                        isLink
                    >
                        <React.$Vant.Input placeholder="请选择地区" readOnly value={region} />
                    </React.$Vant.Form.Item>

                    <React.$Vant.Popup position="bottom" round visible={RegionShow} onClose={() => { SetRegionShow(false) }}>
                        <React.$Vant.Area
                            title="请选择地区"
                            areaList={areaList}
                            value={code}
                            onCancel={() => { SetRegionShow(false) }}
                            onConfirm={RegionConfirm}
                        />
                    </React.$Vant.Popup>

                    {/* 详细地址 */}
                    <React.$Vant.Form.Item
                        name="address"
                        label="详细地址"
                        labelWidth='4em'
                        labelAlign='right'
                        rules={[
                            { required: true, message: '请输入详细地址' }
                        ]}
                    >
                        <React.$Vant.Input placeholder="请输入详细地址" />
                    </React.$Vant.Form.Item>

                    {/* 租用时间 */}
                    <React.$Vant.Form.Item
                        label="租用时间"
                        labelWidth='4em'
                        labelAlign='right'
                        onClick={() => { SetDateShow(true) }}
                        isLink
                    >
                        <React.$Vant.Input readOnly value={endtime} />
                    </React.$Vant.Form.Item>

                    <React.$Vant.Calendar
                        showConfirm={false}
                        visible={DateShow}
                        defaultValue={end}
                        onClose={() => { SetDateShow(false) }}
                        onConfirm={DateConfirm}
                    />

                    {/* 图片 */}
                    <React.$Vant.Form.Item
                        label="上传证件"
                        name="card"
                        labelWidth='4em'
                        labelAlign='right'
                        rules={[
                            { required: true, message: '请上传证件图片' }
                        ]}
                    >
                        <React.$Vant.Uploader previewSize={150} maxCount={1} value={card} />
                    </React.$Vant.Form.Item>

                    <div className="zy_goods_foot dis_flex">
                        <div className="left">
                            <div>{day}天<b>￥<em>{price}</em></b></div>
                            <div className="tou_d">含押金￥{rent}</div>
                        </div>
                        <p>
                            <React.$Vant.Button nativeType="submit" block size="normal" type="primary">立即申请</React.$Vant.Button>
                        </p>
                    </div>


                </React.$Vant.Form>
            </div>
        </>
    )
}

export default Add